<template>
    <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
</template>

<script lang="ts">
import { toolbar, plugins } from './util/tinymce';
//JS部分
//在js中引入所需的主题和组件
import tinymce from 'tinymce';
import 'tinymce/skins/content/default/content.css';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
// import 'tinymce/models/dom'; // 这里是个坑 一定要引入

//在TinyMce.vue中接着引入相关插件
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/image'; // 插入上传图片插件
// import "tinymce/plugins/media" // 插入视频插件
import 'tinymce/plugins/preview';
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
// import 'tinymce/plugins/code'; // 源码
import 'tinymce/plugins/fullscreen'; //全屏
import 'tinymce/plugins/link';
import 'tinymce/plugins/autoresize';
// import 'tinymce/plugins/paste';
// import 'tinymce/plugins/powerpaste';
import 'tinymce/plugins/table';
import { computed, defineComponent, ref, reactive, unref, watch, onMounted, onBeforeUnmount, onDeactivated } from 'vue';
export default defineComponent({
    components: { Editor },
    props: {
        value: {
            type: String,
            default: () => {
                return '';
            }
        },
        baseUrl: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: plugins
        }, //必填
        toolbar: {
            type: [String, Array],
            default: toolbar
        } //必填
    },
    emits: ['getContent'],
    setup(props, { emit }) {
        //用于接收外部传递进来的富文本
        const myValue = ref(props.value);
        const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''));

        //定义一个对象 init初始化
        const elRef = ref<any>();
        const init = reactive<any>({
            selector: '#' + tinymceId.value, //富文本编辑器的id,
            language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
            language: 'zh_CN', //语言
            skin_url: '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
            // height: 400, //编辑器高度
            branding: false, //是否禁用“Powered by TinyMCE”
            menubar: true, //顶部菜单栏显示
            image_dimensions: false, //去除宽高属性
            plugins: props.plugins, //这里的数据是在props里面就定义好了的
            toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
            min_height: 500, //
            font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
            fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
            paste_webkit_styles: 'all',
            paste_retain_style_properties: 'all',
            paste_merge_formats: true,
            nonbreaking_force_tab: false,
            paste_auto_cleanup_on_paste: false,
            file_picker_types: 'file',
            paste_data_images: true,
            content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

            // word 粘贴
            external_plugins: {
                // powerpaste: '/tinymce/powerpaste/plugin.min.js',
                powerpaste: '/tinymce/plugins/powerpaste/plugin.min.js'
            },
            powerpaste_word_import: 'propmt', // 参数可以是propmt, merge, clear，效果自行切换对比
            powerpaste_html_import: 'propmt', // propmt, merge, clear
            powerpaste_allow_local_images: true,

            setup: (edt) => {
                // edt.on('paste', (e) => { // 获取
                //     console.log(e.clipboardData.getData('text/plain'));
                // });
            },

            //图片上传
            images_upload_handler: (blobInfo, success, progress) => {
                new Promise(async (resolve, reject) => {
                    if (blobInfo.blob().size / 1024 / 1024 > 2) {
                        reject({ message: '上传失败，图片大小请控制在 2M 以内', remove: true });
                        return;
                    } else {
                        // const formData = new FormData();
                        // formData.append('files', blobInfo.blob());
                        // let res = await api.fileModel.upload(formData);
                        // if (res.success) {
                        //     let fileName = res.moule[0].fileName;
                        //     let imgSrc = `${defaultSettings.baseUrl}/images/${fileName}`;
                        //     console.log(imgSrc);
                        //     resolve(imgSrc); //上传成功，在成功函数里填入图片路径
                        //     success(imgSrc, { alt: fileName });
                        // }

                        // 直接base64上传

                        const fileReader = new FileReader();
                        fileReader.onload = (e: any) => {
                            success(e.target.result, { alt: blobInfo.blob().name });
                        };
                        fileReader.readAsDataURL(blobInfo.blob());
                    }
                });
            },

            // 文件上传
            file_picker_callback: (callback, value, meta) => {
                // Provide file and text for the link dialog
                if (meta.filetype == 'file') {
                    callback('mypage.html', { text: 'My text' });
                }

                // Provide image and alt text for the image dialog
                if (meta.filetype == 'image') {
                    callback('myimage.jpg', { alt: 'My alt text' });
                }

                // Provide alternative source and posted for the media dialog
                if (meta.filetype == 'media') {
                    callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
                }
            }
        });

        //监听外部传递进来的的数据变化
        watch(
            () => props.value,
            () => {
                myValue.value = props.value;
                emit('getContent', myValue.value);
            }
        );
        //监听富文本中的数据变化
        watch(
            () => myValue.value,
            () => {
                emit('getContent', myValue.value);
            }
        );
        //在onMounted中初始化编辑器
        onMounted(() => {
            const el = unref(elRef);
            if (el) {
                el.style.visibility = '';
            }
            tinymce.init(init);
        });

        function destory() {
            if (tinymce !== null) {
                tinymce?.remove?.(init.selector!);
            }
        }

        onBeforeUnmount(() => {
            destory();
        });

        onDeactivated(() => {
            destory();
        });

        return {
            tinymceId,
            myValue,
            init
        };
    }
});
</script>
<style lang="less" scoped>
textarea {
    z-index: -1;
    visibility: hidden;
}
</style>
